﻿<#--<link href="/media/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>-->
<#--<link href="/media/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>-->
<#--<link href="/media/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>-->
<#--<link href="/media/css/style-metro.css" rel="stylesheet" type="text/css"/>-->
<#--<link href="/media/css/style.css" rel="stylesheet" type="text/css"/>-->
<#--<link href="/media/css/style-responsive.css" rel="stylesheet" type="text/css"/>-->
<#--<link href="/media/css/default.css" rel="stylesheet" type="text/css" id="style_color"/>-->
<#--<link href="/media/css/uniform.default.css" rel="stylesheet" type="text/css"/>-->
<#--<!-- END GLOBAL MANDATORY STYLES &ndash;&gt;-->
<#--<!-- BEGIN PAGE LEVEL STYLES &ndash;&gt;-->
<#--<link href="/media/css/jquery.gritter.css" rel="stylesheet" type="text/css"/>-->
<#--<link href="/media/css/jqvmap.css" rel="stylesheet" type="text/css" media="screen"/>-->
<#--<link href="/media/css/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen"/>-->
<link rel="stylesheet" type="text/css" href="/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="/h-ui.admin/css/style.css" />
<!-- BEGIN BODY -->
<script type="text/javascript" src="/media/js/jquery-1.10.1.min.js" ></script>
<script type="text/javascript" src="/echarts/echarts.min.js"></script>
<script type="text/javascript" src="/lib/layer/2.4/layer.js"></script>
<!-- 遮罩层 -->
<div id='PageLoadingTip' style="position: absolute; z-index: 1000; top: 0px; left: 0px; width: 100%; height: 100%; background: #222222; text-align: center;">
    <h1 style="top: 48%; position: relative"><img src="/media/image/loading.gif"></h1>
</div>

<div class="page-container" >
    <div id="id-4" style="min-width:700px;height:400px"></div>
</div>
<!--普通弹出层-->
<div id="modal-demo" class="modal fade middle" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content radius">
            <div class="modal-body">
                <p id="p-content">个人信息配置成功</p>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- BEGIN CORE PLUGINS -->
<script src="/media/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<!-- IMPORTANT! Load jquery-ui-1.10.1.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
<script src="/media/js/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="/media/js/bootstrap.min.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="media/js/excanvas.min.js"></script>
<script src="media/js/respond.min.js"></script>
<![endif]-->
<script src="/media/js/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="/media/js/jquery.blockui.min.js" type="text/javascript"></script>
<script src="/media/js/jquery.cookie.min.js" type="text/javascript"></script>
<script src="/media/js/jquery.uniform.min.js" type="text/javascript" ></script>


<script src="/media/js/app.js" type="text/javascript"></script>


<script type="text/javascript">

    $('.icn-only').click(function () {
        // var content = $('#contentInfo').val();
        console.log(this.id)
        var spanId = this.id + "_span";
        var content = $('#' + spanId).html();
        $('#p-content').html(content);
        $("#modal-demo").modal("show")
    });
</script>

<script>
    jQuery(document).ready(function() {
        App.init(); // initlayout and core plugins
    });
    var dom4 = document.getElementById("id-4");
    var myChart4 = echarts.init(dom4);
    var xArry = new Array();
    var yArry = new Array();
    <#if reportList??>
        <#list reportList as list>
           var x = '${list.name}';
           var y = ${list.count};
            xArry.push(x);
            yArry.push(y);
        </#list>
    </#if>
    option = null;
    option = {
        title : {
            text: '各报表使用情况'
        },
        tooltip : {
            trigger: 'axis'
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,

        xAxis : [
            {
                type : 'category',
                axisLabel: {
                    interval:0,
                    rotate:270
                },
                data : xArry
            }
        ],
        grid: { // 控制图的大小，调整下面这些值就可以，
            x: 40,
            x2: 80,
            y2: 150,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
        },
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'点击率',
                type:'bar',
                data:yArry
            }
        ]
    };
    ;
    if (option && typeof option === "object") {
        myChart4.setOption(option, true);
    }
</script>

<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
<!-- 遮罩层 -->
<script type="text/javascript">
    function _PageLoadingTip_Closes() {
        $("#PageLoadingTip").fadeOut("normal", function () {
            $(this).remove();
        });
    }
    var _pageloding_pc;
    $.parser.onComplete = function () {
        if (_pageloding_pc) clearTimeout(_pageloding_pc);
        _pageloding_pc = setTimeout(_PageLoadingTip_Closes, 1000);
    }
</script>
